<template>
	<view class="rf-product-list">
		<view class="rf-product-list-container">
			<block v-for="(item, index) in list" :key="index">
				<!--商品列表-->
				<view
					v-if="(index + 1) % 2 !== 0 || isList"
					class="rf-product-item"
					@tap.stop="navTo(`/pages/product/product?id=${item._id}`)"
					:class="[isList ? 'rf-product-flex-list' : '']"
					hover-class="hover"
					:hover-start-time="150"
				>
					<view class="rf-product-image-wrapper">
						<image :src="item.spec_items[0].thumbnail" mode="aspectFill" :preview="false" :class="[isList ? 'rf-product-list-img' : 'rf-product-img']"></image>
						<text class="sketch in1line">{{ item.category_name }}</text>
						<view class="triangle-wrapper"><image class="triangle-tag" :src="item | filterTagName"></image></view>
					</view>
					<view class="rf-pro-content">
						<view class="rf-pro-tit">{{ item.spec_items[0].pname }}</view>
						<view v-if="item">
							<view class="rf-pro-price">
								<text class="rf-sale-price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ item.spec_items[0].price }}</text>
								<text class="rf-factory-price" v-if="item.spec_items[0].original_price > item.spec_items[0].price">{{ moneySymbol }}{{ item.spec_items[0].original_price }}</text>
							</view>
							<view class="rf-pro-pay">
								<text>
									<text :class="'text-' + themeColor.name">{{ item.spec_items[0].sold_out | filterTotalSales }}</text>
									人付款
								</text>
								<text @tap.stop="toggleSpec(item)" class="iconfont icongouwuche2" :class="'text-' + themeColor.name"></text>
							</view>
						</view>
					</view>
				</view>
				<!--商品列表-->
			</block>
		</view>
		<view class="rf-product-list-container" v-if="!isList">
			<block v-for="(item, index) in list" :key="index">
				<!--商品列表-->
				<view
					v-if="(index + 1) % 2 === 0"
					class="rf-product-item"
					@tap.stop="navTo(`/pages/product/product?id=${item._id}`)"
					:class="[isList ? 'rf-product-flex-list' : '']"
					hover-class="hover"
					:hover-start-time="150"
				>
					<view class="rf-product-image-wrapper">
						<image :src="item.spec_items[0].thumbnail" mode="aspectFill" :preview="false" :class="[isList ? 'rf-product-list-img' : 'rf-product-img']"></image>
						<text class="sketch in1line">{{ item.category_name }}</text>
						<view class="triangle-wrapper" v-if="item.shipping_type === '1' || item.is_virtual === '1' || item.commissionRate || item.is_open_presell === '1'">
							<image class="triangle-tag" :src="item | filterTagName"></image>
						</view>
					</view>
					<view class="rf-pro-content">
						<view class="rf-pro-tit">{{ item.spec_items[0].pname }}</view>
						<view v-if="item">
							<view class="rf-pro-price">
								<text class="rf-sale-price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ item.spec_items[0].price }}</text>
								<text class="rf-factory-price" v-if="item.spec_items[0].original_price > item.spec_items[0].price">{{ moneySymbol }}{{ item.spec_items[0].original_price }}</text>
							</view>
							<view class="rf-pro-pay">
								<text>
									<text :class="'text-' + themeColor.name">{{ item.spec_items[0].sold_out | filterTotalSales }}</text>
									付款
								</text>
								<text @tap.stop="toggleSpec(item)" :class="'text-' + themeColor.name" class="iconfont icongouwuche2"></text>
							</view>
						</view>
					</view>
				</view>
				<!--商品列表-->
			</block>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec show" v-if="specClass === 'show'" @touchmove.stop.prevent="stopPrevent" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask" @tap="hideSpec"></view>
			<view class="layer" :style="{ bottom: bottom ? `${bottom}upx` : 0 }" @tap.stop="stopPrevent">
				<rf-attr-content :product="productDetail" @toggle="toggleSpec" :showBuyBtn="true"></rf-attr-content>
			</view>
		</view>
	</view>
</template>
<script>
/**
 * @des 商品列表
 *
 * @author stav stavyan@qq.com
 * @date 2020-05-15 10:49
 */
import { reqProductDetail, reqCartAdd, reqCartCount, reqImmediatelyBuy } from '@/api';
import rfAttrContent from '@/components/rf-attr-content';
import $mAssetsPath from '@/config/assets.config';
import { mapMutations } from 'vuex';
export default {
	name: 'rfProductList',
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		// 是否以列表展示 | 列表或大图
		isList: {
			type: Boolean,
			default: false
		},
		// 是否以列表展示 | 列表或大图
		bottom: {
			type: Number,
			default: 0
		}
	},
	components: {
		rfAttrContent
	},
	data() {
		return {
			specClass: 'none',
			moneySymbol: this.moneySymbol,
			productDetail: {}
		};
	},
	filters: {
		filterTotalSales(val) {
			if (val > 10000) {
				val = `${(val / 10000).toFixed(2)}w`;
			}
			return val;
		},
		filterTagName(val) {
			if (val.commissionRate) {
				// 分销商品
				return $mAssetsPath.distribution;
			} else if (val.is_virtual === '1') {
				// 虚拟产品
				return $mAssetsPath.virtual;
			} else if (val.shipping_type === '1') {
				// 包邮产品
				return $mAssetsPath.pinkage;
			}
		}
	},
	methods: {
		...mapMutations(['setCartNum']),
		// 跳转详情
		navTo(route) {
			this.$mRouter.push({
				route
			});
		},
		// 获取产品详情
		async getProductDetail(row) {
			await this.$http
				.get(`${reqProductDetail}`, {
					p_id: row._id
				})
				.then(async r => {
					this.productDetail = await r;
					this.productDetail.sku_name = row.sku_name;
					this.specClass = 'show';
				});
		},
		// 规格弹窗开关
		toggleSpec(row) {
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				if (row.spec_items[0].stock === 0) {
					this.$mHelper.toast('库存不足');
					return;
				}
				if (row.type.toString() === '1') {
					this.handleCartItemCreate(row.skuId, row.cartCount);
				} else if (row.type.toString() === '2') {
					this.handleImmediatelyBuy(row.skuId, row.cartCount);
				}
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.getProductDetail(row);
			}
		},
		stopPrevent() {},
		hideSpec() {
			this.specClass = 'hide';
			setTimeout(() => {
				this.specClass = 'none';
			}, 250);
		},

		// 立即购买
		async handleImmediatelyBuy(skuId, cartCount) {
			const data = {};
			await this.$http
				.post(`${reqImmediatelyBuy}`, {
					p_id: skuId,
					num: cartCount
				})
				.then(async response => {
					data.type = 'buy_now';
					const ids = [response._id];
					data.data = ids.join(",");
					this.navTo(`/pages/order/create/order?data=${JSON.stringify(data)}`);
				});
		},

		// 添加商品至购物车
		async handleCartItemCreate(skuId, cartCount) {
			await this.$http
				.post(`${reqCartAdd}`, {
					p_id: skuId,
					num: cartCount
				})
				.then(async response => {
					await this.$http.get(`${reqCartCount}`).then(async r => {
						this.setCartNum(r.cart_count);
					});
					this.$mHelper.toast('添加购物车成功');
				});
		}
	}
};
</script>
